<template>
    <div class="flex gap-4">
        <div
            @click="selected = i"
            v-for="(tab, i) in tabs"
            :class="selected === i ? ' font-bold text-black border-b-4 border-green-700 ' : 'text-gray-500 hover:text-green-700 border-b-4 border-slate-200'"
            class="transition-all duration-200 cursor-pointer"
        >{{ tab }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref(0)

const tabs = [
    '首页',
    '学期课程课表',
    '课程成绩查询',
    '学生选课中心',
    '学生教材选用',
    '社会考试报名',
    '培养方案明细',

]
</script>